<template>
	<view>
		<!-- #ifdef H5 -->
		<back></back>
		<!-- #endif -->
		<!-- <mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"> -->
			<view class="all">
				<view>
					<view class="top-messge">
						<view class="head u-flex">
							<image :src="avatar?avatar:'@/static/logo.png'" mode="aspectFill"></image>
							<text>{{shopname}}</text>
						</view>
						<view class="u-flex">
							<view class="left">
								<view class="title">订单数</view>
								<view class="num">{{count}}<text>单</text></view>
							</view>
							<view>
								<view class="title">总收益（元）</view>
								<view class="num"><text>￥</text>{{money}}</view>
							</view>
						</view>
						<view class="withdraw u-flex-center" @click="$func.jump('/wNew/pages/withdrawal')">去提现
							<image src="@/static/yCreate/right3.png" mode="widthFix"></image>
						</view>
					</view>
					
					<view class="screen-bg">
						<block v-for="(item, index) in screen_list" :key="index">
							<view class="screen-item" :class="{choose: current_index == index}" @click="onScreen(index)">
								{{item.title}}
							</view>
						</block>
					</view>
					
					<view class="detail u-flex-center u-row-between">
						<text>收益明细</text>
						<view class="u-flex-center" @click="show=true">
							<view>筛选</view>
							<image src="@/static/yCreate/bot.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				
				<block v-if="current_index == 0">
					<view class="card u-border-top" v-for="(item,index) in list" :key="index">
						<view class="top u-flex-center u-row-between">
							<view>单号：{{item.order_no}}</view>
							<view class="state">{{item.createtime_text}}</view>
						</view>
						<view class="u-flex-center u-row-left" v-for="(items,indexs) in item.goods" :key="indexs">
							<image :src="items.image" mode="aspectFill" class="head-img"></image>
							<view class="cont">
								<view class="name u-line-2">{{items.title}}</view>
								<view class="u-flex u-row-between u-m-t-30">
									<view class="price"><text>￥</text>{{items.price }}</view>
									<view class="number">扣除佣金：￥{{items.yj_price }}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				
				<block v-else-if="current_index == 1">
					<view class="wrap-list u-border-top">
						<block v-for="(item,index) in list" :key="index">
							<view class="wrap-item">
								<image class="file" :src="item.gift.show_file"></image>
								
								<view class="right">
									<view class="top">
										<view class="name">{{item.user_name}}送{{item.gift_name}}</view>
										<view class="num">x{{item.gift_number}}</view>
									</view>
									
									<view class="bottom">
										<view class="time">{{item.createtime}}</view>
										
										<view class="price">¥{{item.price}}</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</block>
			</view>
		<!-- </mescroll-body> -->
		<u-calendar v-model="show" mode="range" @change="change" active-bg-color="#3fbe89" range-bg-color="rgba(146, 253, 200, 0.3)" range-color="#3fbe89"></u-calendar>
	</view>
</template>

<script>
	import {
		totalIncome
	} from "@/api/newLive.js";
	// import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		// mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				flowList:[],
				show: false,
				type: '-1',
				avatar:"",
				shopname:"",
				count:"",
				money:"",
				
				page: 1,
				total: 0,
				list:[],
				
				screen_list: [
					{title: "商户"},
					{title: "直播"}
				],
				current_index: 0,
			};
		},
		onReady() {
			this.$u.post('/api/shop/shop_details', {}).then(res => {
				if (res.code == 1) {
					this.avatar = res.data.avatar
					this.shopname = res.data.shopname
				}
			})		
		},
		
		onLoad() {
			this.onRefresh()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++
				this.getData()
			}
		},
		methods:{
			confirm(id) {
				this.$u.post('scholar/order_complete',{
					id:id
				}).then(res=> {
					this.$u.toast(res.msg)
					if(res.code==1) {
						this.mescroll.resetUpScroll();
					}
				})
			},
			upCallback(page) {
				this.mescroll.optUp.textNoMore = '-已经到底啦-'
				this.$u.post('scholar/order_list',{
					page: page.num,
					limit: page.size,
					id: this.type
				}).then(res=>{
					this.mescroll.endBySize(res.data.data.length, res.data.total);
					if(page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
					this.flowList=this.flowList.concat(res.data.data); //追加新数据
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			change(index) {
				console.log(index)
				this.current = index.startDate+' '+index.endDate;
				
				this.onRefresh()
				// this.mescroll.resetUpScroll();
			},
			
			/**
			 * 筛选
			 */
			onScreen(index) {
				this.current_index = index
				this.onRefresh()
			},
			
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1
				this.list = []
				
				this.getData()
			},
			/**
			 * 网络请求
			 */
			getData() {
				if (this.current_index == 0) {
					this.getList()
				} else if (this.current_index == 1) {
					this.getLiveIncomeList()
				}
			},
			/**
			 * 直播收益
			 */
			getLiveIncomeList() {
				totalIncome(this.page, this.current, 2).then(res => {
					this.total = res.data.list.total
					this.count = res.data.count
					this.money = res.data.money
					
					let list = res.data.list.data
					if (this.page == 1) {
						this.list = list
					} else {
						this.list = this.list.concat(list)
					}
				})
			},
			/**
			 * 商户收益
			 */
			getList(){
				this.$u.post('/api/shop/get_income_list', {
					search_time:this.current,
					page: this.page
				}).then(res => {
					if (res.code == 1) {
						this.count = res.data.count
						this.money = res.data.money
						this.total = res.data.list.total
						
						let list = res.data.list.data
						if (this.page == 1) {
							this.list = list
						} else {
							this.list = this.list.concat(list)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	/deep/.u-btn--primary {
		background-color: #3fbe89;
		border:none;
	}
	.all {
		padding: 30rpx;
		.top-messge {
			position: relative;
			padding: 30rpx 37rpx;
			width: 100%;
			height: 307rpx;
			background: url('@/static/yCreate/bg.png') no-repeat;
			background-size: 100% 100%;
			.head {
				margin-bottom: 50rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;
					flex-shrink: 0;
					border-radius: 50rpx;
				}
			}
			.left {
				margin-right: 243rpx;
				margin-left: 30rpx;
				text {
					font-size: 24rpx !important;
				}
			}
			.title {
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.num {
				flex-shrink: 0;
				margin-top: 10rpx;
				font-size: 48rpx;
				font-weight: bold;
				color: #FFFFFF;
				text {
					font-size: 28rpx;
					font-weight: 500;
				}
			}
			.withdraw {
				position: absolute;
				top: 32rpx;
				right: 0;
				width: 180rpx;
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 35rpx 0rpx 0rpx 35rpx;
				font-size: 28rpx;
				color: #606DCE;
				image {
					width: 12rpx;
					height:10rpx;
					margin-left: 10rpx;
				}
			}
		}
		.detail {
			margin: 30rpx 0;
			font-size: 24rpx;
			text {
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
			}
			image {
				width: 20rpx;
				height: auto;
				margin-left: 10rpx;
			}
		}
		.card {
			width: 100%;
			padding: 30rpx 0;
			.top {
				padding-bottom: 30rpx;
				font-size: 24rpx;
				.state {
					color: #888;
				}
			}
			.head-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
			.cont {
				width: 100%;
				.name {
					margin-bottom: 22rpx;
					font-size: 28rpx;
				}
				.content {
					font-size: 24rpx;
					color: #888888;
				}
				.bot {
					margin-top: 40rpx;
					font-size: 26rpx;
					color: #888;
					.price {
						font-family: PingFang SC;
						font-weight: 500;
						color: #DA0000;
					}
					text {
						font-size: 32rpx;
					}
				}
				.price {
					font-size: 40rpx !important;
					font-weight: 550;
					color: #EF5205;
					text {
						font-weight: 500;
						font-size: 20rpx;
					}
				}
				.number {
					font-size: 28rpx;
					color: #EF5205;
				}
			}
			
		}
	}
	
	
	.screen-bg {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		
		.screen-item {
			flex: 1;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			overflow: hidden;
			color: #333;
			font-size: 30rpx;
		}
		.choose {
			color: $theme-color;
		}
	}
	
	.wrap-list {
		width: 100%;
		padding: 30rpx 0;
		overflow: hidden;
		
		.wrap-item {
			width: 100%;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.file {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
			
			.right {
				margin-left: 20rpx;
				flex: 1;
				min-height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.top {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					overflow: hidden;
					
					.name {
						color: #333;
						font-size: 30rpx;
					}
					
					.num {
						color: #666;
						font-size: 28rpx;
					}
				}
				
				.bottom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					overflow: hidden;
					
					.price {
						color: #f00;
						font-size: 30rpx;
					}
					
					.time {
						color: #999;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	
</style>
